﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    ViewBag.Title = "Index";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>客户页面</title>
    <link href="~/libs/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
</head>
<body>
    <div style="width:100%">
        <form class="layui-form layui-row layui-col-space16">
            <div class="layui-col-sm3">
                <label class="layui-form-label">收货人</label>
                <div class="layui-input-block">
                    <input type="text" name="ownerPeo" placeholder="请输入收货人" class="layui-input">
                </div>
            </div>
            <div class="layui-col-sm3">
                <button type="button" class="layui-btn layui-bg-orange" onclick="layuiTable()">查询</button>
                <button type="button" class="layui-btn layui-bg-blue" onclick="Addopen()">新增</button>
                <button type="button" class="layui-btn layui-bg-red" onclick="Deleted(0)">删除</button>
            </div>
        </form>
    </div>

    <div id="PopupBox" style="display: none;width:1400px">
        <form id="Vendorform" class="layui-form layui-form-pane" style="margin:15px">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">出货单号</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="ShoppedCode" placeholder="请输入出货单号" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">货主编码</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="OwnerCode" placeholder="请输入货主编码" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">交货时间</label>
                    <div class="layui-input-wrap layui-input-block" style="width:334px">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-date"></i>
                        </div>
                        <input type="text" name="OwnerDate" id="OwnerDate" lay-verify="required|date" placeholder="YYYY-MM-DD" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">收货人</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="OwnerPeo" placeholder="请输入收货人" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">收货人电话</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="OwnerTel" placeholder="请输入收货人电话" lay-verify="required|phone" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">收货人地址</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="OwnerArea" placeholder="请输入收货人地址" lay-verify="required" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">运输公司</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="Transport" placeholder="请输入运输公司" lay-verify="required" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">发货运单号</label>
                    <div class="layui-input-block" style="width:334px">
                        <input type="text" name="ShoppedNum" placeholder="请输入发货运单号" lay-verify="required|phone" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline" style="border:groove;border-width:1px">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block" style="width:332px">
                        <input type="radio" name="State" value="1" title="确认" checked>
                        <input type="radio" name="State" value="0" title="未确认">
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label" style="width:1360px">备注</label>
                <div class="layui-input-block" style="width:1360px">
                    <textarea placeholder="请输入备注" name="Result" class="layui-textarea"></textarea>
                </div>
            </div>

            <div style="width:1360px">
                <button type="button" class="layui-btn layui-bg-blue" style="margin-bottom:10px" onclick="AddYes()">添加行</button>
                <button type="button" class="layui-btn layui-bg-red" style="margin-bottom:10px" onclick="DeletedYes()">删除行</button>
                <table class="layui-hide" id="tableadd" lay-filter="tableadd"></table>
            </div>


            <div class="layui-form-item" style="margin-top:15px">
                <button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

    <script src="~/libs/layui-v2.5.6/layui/layui.js"></script>
    <script src="~/libs/jquery/jquery.js"></script>
    <script>
        //实例化layui
        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laypage = layui.laypage;
        var laydate = layui.laydate;

        //自定义字段
        var index={};
        var Id="";
        var rowCount = 0;
        var pageCount = 0;
        var pageIndex = 1;
        var pageSize = 10;
        var tableStatusdata=[];
        var shipped={
            ShoppedCode:"",
            OwnerCode:"",
            OwnerDate:"",
            OwnerPeo:"",
            OwnerTel:"",
            OwnerArea:"",
            Transport:"",
            ShoppedNum:"",
            Result:"",
            State:"",
        }
        var addlist=[]

        //Layui页面渲染事件
        layui.use(function(){
            //layuiTable();
            // 执行一个laydate实例
            laydate.render({
                elem: '#OwnerDate' // 指定元素
            });
            //显示点击行事件
            // table.on('tool(tabledata)', function(obj){
            //     // if(obj.event=='delete'){
            //     //     tableStatusdata=[];
            //     //     tableStatusdata.push(obj.data)
            //     //     Deleted(1);
            //     // }
            //     // if(obj.event=='update'){
            //     //     Updateopen(obj.data)
            //     // }
            // })

            table.on('rowDouble(tableadd)',function(obj){
                var data = obj.data; // 获取当前行数据
                var Unit="";
                addlist.forEach(function(trim){
                    if(trim.IsNo==true){
                        trim.ThirdCode=$("[name='thirdCode']").val();
                        trim.ThirdOwner=$("[name='thirdOwner']").val();
                        trim.ThirdName=$("[name='thirdName']").val();
                        trim.Result=$("[name='result']").val();
                        trim.DetailArea=$("[name='detailArea']").val();
                        trim.DetailCode=$("[name='detailCode']").val();
                        trim.DetailName=$("[name='detailName']").val();
                        trim.DetailNum=$("[name='detailNum']").val();
                        trim.Unit=$("[name='unit']").val();
                        trim.PickNum=$("[name='pickNum']").val();
                        Unit=trim.Unit;
                        console.log(trim.Unit);
                        console.log(Unit);
                    }
                    if(trim.Subscript==data.Subscript){
                        trim.IsNo=!trim.IsNo;
                    }
                    else{
                        trim.IsNo=false;
                    }
                })
                AddTable();
                addlist.forEach(function(trim){
                    if(trim.IsNo==true){

                       $("[name='unit']").val(Unit);
                       Unit="";
                    }
                })
            })

        })

        //打开新增弹出框
        function Addopen() {
            Id=0;
            $("[name='ShoppedCode']").val("");
            $("[name='OwnerCode']").val("");
            $("[name='OwnerDate']").val("");
            $("[name='OwnerPeo']").val("");
            $("[name='OwnerTel']").val("");
            $("[name='OwnerArea']").val("");
            $("[name='Transport']").val("");
            $("[name='ShoppedNum']").val("");
            $("[name='Result']").val("");
            $("[name='State']").val("");

            addlist=[]
            AddTable();

            form.render();
            //打开弹出层
            index=layer.open({
                type: 1,
                shade: false, // 不显示遮罩
                title:['新增客户出货信息', 'text-align:center;font-size:25px'],
                offset: '10px',
                content: $('#PopupBox'), // 捕获的元素
                area: ['1400px', '870px'], //宽高
                end: function(){
                    // layer.msg('关闭后的回调', {icon:6});
                   var div = document.getElementById('PopupBox');
                   div.style.display = 'none';
                }
            });
        }

        //显示添加页面表格
        function AddTable (){

            table.render({
                elem: '#tableadd',
                id: 'Subscript', // 自定义 id 索引
                height: '300px',
                css: [ // 设置单元格样式
                    // 取消默认的溢出隐藏，并设置适当高度
                    '.layui-table-cell{height: 50px;overflow: visible !important}',
                ].join(''),
                cols: [[ //标题栏
                      {checkbox: true, fixed: true},
                      {field: 'ThirdCode', title: '第三方单号',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="text" name="thirdCode" placeholder="请输入第三方单号" lay-verify="required" class="layui-input" style="width:160px" value="'+d.ThirdCode+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.ThirdCode+'</span>';
                          }
                      },width:190},
                      {field: 'ThirdOwner', title: '第三方客户',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="text" name="thirdOwner" placeholder="请输入第三方客户" lay-verify="required" class="layui-input" style="width:160px" value="'+d.ThirdOwner+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.ThirdOwner+'</span>';
                          }
                      },width:190},
                      {field: 'ThirdName', title: '第三方客户名称',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="text" name="thirdName" placeholder="请输入第三方客户名称" lay-verify="required" class="layui-input" style="width:160px" value="'+d.ThirdName+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.ThirdName+'</span>';
                          }
                      },width:190},
                      {field: 'Result', title: '备注',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="text" name="result" placeholder="请输入备注" lay-verify="required" class="layui-input" style="width:160px" value="'+d.Result+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.Result+'</span>';
                          }
                      },width:190},
                      {field: 'DetailArea', title: '地址',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="text" name="detailArea" placeholder="请输入地址" lay-verify="required" class="layui-input" style="width:160px" value="'+d.DetailArea+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.DetailArea+'</span>';
                          }
                      },width:190},
                      {field: 'DetailCode', title: '商品编码'},
                      {field: 'DetailName', title: '商品名称'},
                      {field: 'DetailNum', title: '出货单数量',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="number" name="detailNum" placeholder="请输入出货单数量" lay-verify="required" class="layui-input" style="width:160px" value="'+d.DetailNum+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.DetailNum+'</span>';
                          }
                      },width:190},
                      {field: 'Unit', title: '单位',templet:function(d){
                          if(d.IsNo == true){
                              return '<select name="unit" lay-filter="aihao" placeholder="请选择" lay-verify="required" ><option value="">请选择</option><option value="1">T</option><option value="2">Kg</option><option value="3">g</option></select>';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.Unit+'</span>';
                          }
                      },width:190},
                      {field: 'PickNum', title: '拣货数量',templet:function(d){
                          if(d.IsNo == true){
                              return '<input type="number" name="pickNum" placeholder="请输入拣货数量" lay-verify="required" class="layui-input" style="width:160px" value="'+d.PickNum+'" >';
                          }
                          if(d.IsNo == false){
                              return '<span>'+d.PickNum+'</span>';
                          }
                      },width:190},
                ]],
                data:addlist,
                //skin: 'line', // 表格风格
                even: true,
                //page: true, // 是否显示分页
                //limits: [5, 10, 15],
                //limit: 5 // 每页默认显示的数量
            });
        }

        //添加行
        function AddYes() {
            var subscript="";
            if(addlist.length==0){
                subscript=0;
            }
            else{
                subscript=(addlist[addlist.length-1].Subscript)+1;
            }

            addlist.push({
                Subscript:subscript,
                IsNo:false,
                Status:"",
                DetailsCode:"",
                ThirdCode:"",
                ThirdOwner:"",
                ThirdName:"",
                Result:"",
                DetailArea:"",
                DetailCode:"",
                DetailName:"",
                DetailNum:"",
                Unit:"",
                PickNum:"",
            })
            AddTable();
        }

        //删除行
        function DeletedYes() {
            var tableStatus = table.checkStatus('Subscript');
            tableStatusdata=tableStatus.data // 选中行的数据
            tableStatusdata.forEach(function(trim){
                addlist=addlist.filter(function(obj){
                    return obj.Subscript!==trim.Subscript;
                })
                console.log(addlist);
            })
            console.log(addlist);
            AddTable();
        }
    </script>

</body>
</html>